<template>
  <div class="data-statistics">
    <StatisticsCard
      :list="list"
      v-bind="$attrs"
      @onClick="handleOpenDialog"
    />
    <el-dialog
      :title="dialogOptions.title"
      :visible.sync="dialogOptions.dialogVisible"
      width="600px"
    >
      <el-table
        :data="additional"
        style="width: 100%"
        border
      >
        <el-table-column
          prop="id"
          label="ID"
        />
        <el-table-column
          prop="username"
          label="姓名"
        />
        <el-table-column
          prop="gender"
          label="性别"
        >
          <template v-slot="{ row }">
            {{ row.gender === 1 ? '男' : row.gender === 0 ? '女' : '不详' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="phone"
          label="联系电话"
        />
      </el-table>
    </el-dialog>
    <el-dialog
      :title="dialogOptions.title"
      :visible.sync="dialogOptions.dialogMonthVisible"
      width="600px"
    >
      <el-table
        :data="month"
        style="width: 100%"
        border
      >
        <el-table-column
          prop="username"
          label="姓名"
        />
        <el-table-column
          prop="gender"
          label="性别"
        >
          <template v-slot="{ row }">
            {{ row.gender === 1 ? '男' : row.gender === 0 ? '女' : '不详' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="user_detail.birthday_at"
          label="出生年月"
        >
          <template v-slot="{ row }">
            {{ handleFiledByID(row.field_data,'content','birthday_at') }}
          </template>
        </el-table-column>
        <el-table-column
          prop="phone"
          label="联系电话"
        />
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
import StatisticsCard from '@/components/StatisticsCard/StatisticsCard.vue'
export default {
  name: '',
  components: {
    StatisticsCard
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      additional: null,
      month: [],
      dialogOptions: {
        dialogVisible: false,
        dialogMonthVisible: false,
        title: ''
      }
    }
  },
  mounted() {
    console.log(this.list, 'list')
  },
  methods: {
    handleOpenDialog(data) {
      if (data.additional) {
        this.additional = data.additional
        this.dialogOptions.title = data.label
        this.dialogOptions.dialogVisible = true
      } else if (data.month) {
        this.month = data.month
        console.log(this.month, 'month')
        this.dialogOptions.title = data.label
        this.dialogOptions.dialogMonthVisible = true
      }
    },
    handleFiledByID(arr, type, name) {
      let filedMsg = null
      console.log(arr, 'arr')
      if (Array.isArray(arr) && arr.length > 0) {
        filedMsg = arr?.filter((filed) => filed?.field?.field === name)
        console.log(filedMsg, filedMsg[0][type], 'filedMsg')
        return filedMsg.length > 0 ? filedMsg[0][type] : ''
      } else {
        console.log(`${arr} is not Array or ${arr} is lenght <=0`)
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.data-statistics {
  &__box {
    width: 100%;
    display: flex;

    .card {
      width: calc(100% / 5);
      margin-right: 20px;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .card {
    background-color: #fff;
    border-radius: 4px;
    padding: 20px;
    margin-right: 20px;

    &:last-child {
      margin-right: 0;
    }
  }

  &__item-warp {
    display: flex;
    align-items: center;
    &--icon {
      width: 48px;
      height: 48px;
    }
    &--data {
      margin-left: 10px;
      display: flex;
      flex-direction: column;
      .label {
        color: rgba(0, 0, 0, .9);
        font-size: 14px;
      }
    }
  }

  &__count {
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 18px
  }
}

</style>
